<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bootstrap 自适应(responsive)!!</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
	</head>
	
	<body>
		<div class="container" style="border:1px #42B983 solid;">
			hello 没有充满的容器--------class：container
		</div>
		<div class="container-fluid" style="border:1px #42B983 solid;">
			world 充满的容器------------class:container-fluid
		</div>
		<div class="container-fluid" style="border:1px red solid;">
			<div class="row row-cols-2"><!-- 每行占x列 -->
				<div class="col" style="border:1px cadetblue solid;">
				我是列1
			    </div>
				<div class="col" style="border:1px cadetblue solid;">
				我是列2
				</div>
				<div class=""
				<div class="col" style="border:1px cadetblue solid;">
				我是列3
				</div>
				<div class="col" style="border:1px cadetblue solid;">
				我是列4
				</div>
				<div class="col" style="border:1px cadetblue solid;">
				自动分列列列
				</div>
			</div>
			
		</div>
		<center>hello world</center>
		<p></p>
		<center>记得设置行高</center>
		<div class="row boeder" style="line-height: 10em; height:10em;border: 1px cadetblue solid">
			<div class="col align-self-start" style="border: 1px solid red; height: 2em; line-height: 2em;">
				我在顶部
			</div>
			<div class="col align-self-center" style="border: 1px solid red; height: 2em; line-height: 2em;">
				垂直方向上中下
			</div>
			<div class="col align-self-end" style="border: 1px solid red; height: 2em; line-height: 2em;">
				我在底部
			</div>
		</div>
		<center>justify-content-between</center>
		<div class="row align-items-end justify-content-between" style="line-height: 2em; height:2.1em;border: 1px cadetblue solid">
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列1</div>
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列2</div>
		</div>
		<center>justify-content-start</center>
		<div class="row align-items-end justify-content-start" style="line-height: 2em; height:2.1em;border: 1px cadetblue solid">
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列1</div>
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列2</div>
		</div>
		<center>justify-content-end</center>
		<div class="row align-items-end justify-content-end" style="line-height: 2em; height:2.1em;border: 1px cadetblue solid">
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列1</div>
			<div class="col-3 border" style="line-height: 2em;height: 2em">我是列2</div>
		</div>
		<center>自己改变列的顺序，max=12</center>
		<div class="row">
			<div class="col border order-2">
				我是老大
			</div>
			<div class="col border order-3">
				我是老二
			</div>
			<div class="col border order-1">
				我是老三
			</div>
		</div>
		<center>偏移量offset</center>
		<div class="row">
			<div class="col-2 border">
				我是老大
			</div>
			<div class="col-2 border offset-2">
				我是老二
			</div>
		</div>
		<center>ml:margin left</center>
		<div class="row"><!-- mx,my,ml,mr,mt,mb -->
			<div class="col-2 border  ml-auto">
				我是老大
			</div>
			<div class="col-2 border ml-auto">
				我是老二
			</div>
			<div class="col-2 border ml-auto">
				我是老三
			</div>
		</div>
	</body>
</html>
